import { useCallback, useState } from "react";

function CounterRenderProps({children}){
  const [count,setCount] = useState(0);
  
  const increment = useCallback(()=>{
    setCount(count +1);
  },[count])
  const decrement = useCallback(()=>{
    setCount(count -1);
  },[count])

  return children({count,decrement,increment})
}

export default function CounterRenderPropsExample(){
  return (
    <CounterRenderProps>
      {({count,increment,decrement})=>{
        return (
          <div className="exp-10-counter-render-props">
            <button onClick={decrement}>-</button>
            <span>{count}</span>
            <button onClick={increment}>+</button>
          </div>
        )
      }}
    </CounterRenderProps>
  )
}